<template>
    <div class="Lottery-container" :style="style">
        <svg aria-hidden="true" class="icon-fenx" @click="share">
            <use xlink:href="#icon-fenxiang"></use>
        </svg>
        <div class="tofront" @click="$router.push('front')">返回首页</div>
        <div class="turntable-top">
            <img :src="'lottery-title' | imageFmt" alt="">
            <div class="desc">
                <p>
                    剩余抽奖次数：{{ restNum }} 次
                </p>
            </div>
        </div>
        <div class="turntable-wrapper" ref="wrapper">
            <img class="turntable-img" :src="'lottery-turntable' | imageFmt" alt="" />
            <turntable ref="turntable" :prizes="prizes" :radius="radius" :pointer="'lottery-pointer' | imageFmt" :offset="-8" @start="_getLotteryResult" @end="showResult" />
        </div>
        <div class="turntable-bottom" @click="tolotteryList">
            <svg aria-hidden="true" class="icon-address">
                <use xlink:href="#icon-jiangpin"></use>
            </svg>
            我的奖品
        </div>
        <div v-if="prizes.length > 0">
            <div class="result" ref="result" v-prevent-event="['touchmove']" v-show="resultShow">
                <svg class="close-icon" aria-hidden="true" @click.stop="closeResult">
                    <use xlink:href="#icon-chahao"></use>
                </svg>
                <div class="confirm-wrapper">
                    <div class="confirm-content" v-if="prizes[resultIndex].type > 0">
                        <div class="content">
                            <div class="title">恭喜您</div>
                            <img :src="prizes[resultIndex].pic" alt="">
                            <div class="info-prize">
                                获得{{ prizes[resultIndex].name }}
                                <span v-if="prizes[resultIndex].num > 0">
                                    * {{ prizes[resultIndex].num }}
                                </span>
                            </div>
                            <div class="info-overdue">
                                有效期至{{ overdue  | dateFmt('YYYY年MM月dd日')}}
                            </div>

                        </div>
                    </div>
                    <div class="confirm-content" v-else>
                        <div class="content">
                            <div class="title">很遗憾</div>
                            <img class="no" :src="'prize-no' | imageFmt" alt="">
                            <div class="info-prize-no">
                                没有抽中奖品
                            </div>
                            <div class="info-overdue">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="operate" ref="operate" v-if="prizes[resultIndex].type > 0">
                    <div @click="closeResult" class="operate-btn left">再来一次</div>
                    <div @click="confirm" class="operate-btn">立即兑换</div>
                </div>
                <div class="operate" ref="operate" v-else>
                    <div @click="tolotteryList" class="operate-btn left">我的奖品</div>
                    <div @click="closeResult" class="operate-btn">再来一次</div>
                </div>
            </div>
        </div>
        <confirm ref="alert" text="抽奖次数已用完" :isAlert="true" />
        <confirm ref="confirm" :text="text" @confirm="exchange" />

    </div>
</template>

<script>
const HEIGHT = document.documentElement.clientHeight + 'px';

import Turntable from '@/components/Activity/turntable';
import Confirm from 'common/confirm';
import Scroll from 'common/scroll';
import api from '@/request/api';
import { commonMixin, wxMixin } from '@/common/mixin';
import { protocol } from '@/config';
import { isIOS } from '@/common/utils';

const typeMap = {
    1: '零钱',
    2: '现金',
    3: '谢谢惠顾'
};
export default {
    mixins: [commonMixin, wxMixin],
    name: 'Lottery',
    data() {
        return {
            //剩余抽奖次数
            restNum: '',
            //转盘半径
            radius: 0,
            resultShow: false,
            resultIndex: 0,
            prizes: [],
            page: 1,
            style: {
                height: HEIGHT
            },
            table_id: '',
            overdue: '',
            tableInfo: {},
            turntableClick: 0,// 转盘是否被点击
            userprize_id: '',
            text: '是否确定兑换奖励?'
        };
    },
    props: {},
    computed: {
        // resultText() {
        // if (this.prizes.length === 0) {
        //     return '';
        // }
        // // const type = this.prizes.length > 0 ? typeMap[this.prizes[this.resultIndex].type] : '';
        // const prefix = typeMap[this.prizes[this.resultIndex].type] === 0 ? '' : '恭喜获得';
        // const prize = this.prizes.length > 0 ? this.prizes[this.resultIndex].name : '';
        // return `${prefix}${prize}`;
        // },

        // // 是否注册
        // isLogin() {
        //     let userInfo = this.$store.state.login.userInfo;
        //     let login = userInfo.role === undefined ? false : true;
        //     console.log('loginlogin--:', userInfo, login);
        //     return login
        // },

    },
    created() {
        this.request.get(api.islogin).then(res => {
            if (res.islogin == 1) {
                this._getPrizes();
            } else {
                this.$router.replace({
                    name: 'login',
                    query: {
                        direct: 'lottery'
                    }
                });
            }
        });
    },
    mounted() {
        //响应式设置转盘半径
        this.radius = (this.$refs.wrapper.getBoundingClientRect().width) / 2 - 10;
    },
    methods: {
        _getLotteryResult() {
            if (this.restNum <= 0) {
                this.$refs.alert.show();
                return;
            }
            this.turntableClick = 1
            this.request
                .post(api.lotteryTry, {
                    table_id: this.table_id
                })
                .then((res) => {
                    if (res.key > -1) {
                        // this.restNum = res.rest_num;
                        this.resultIndex = res.key;
                        this.userprize_id = res.userprize_id
                        this.$refs.turntable.rotateTo(this.resultIndex);
                    } else {
                        this.$refs.alert.show()
                    }
                })
                .catch((err) => {
                    this.$toast.fail(err);
                });
        },
        _getPrizes() {
            return this.request
                .get(api.lotteryPrize, {})
                .then((res) => {
                    if (res) {
                        this.tableInfo = res
                        this.prizes = res.prize;
                        this.table_id = res.id
                        this.overdue = res.overdue
                        this.getTryNum()
                    } else {
                        this.$toast({
                            message: '活动已关闭',
                            duration: 1500
                        })
                        this.$router.replace('front')
                    }

                })
                .catch((err) => {
                    console.log(err);
                });
        },
        getTryNum() {
            return this.request
                .get(api.lotteryTryNum, {
                    table_id: this.table_id
                })
                .then((res) => {
                    this.restNum = res;
                })
                .catch((err) => {
                    console.log(err);
                });
        },

        showResult() {
            if (this.turntableClick) {
                setTimeout(() => {
                    this.resultShow = true;
                    this.turntableClick = 0
                }, 500);
            }
        },
        closeResult() {
            this.resultShow = false;
            this.getTryNum()
        },
        confirm() {
            // if (this.prizes[this.resultIndex].type == 3) {
            //     this.$router.push({
            //         name: 'lottery-default-address',
            //         query: {
            //             userprize_id: this.userprize_id,
            //             table_id: this.table_id,
            //             type: this.prizes[this.resultIndex].type
            //         }
            //     })
            // } else {
            //     this.$refs.confirm.show()
            // }
            this.resultShow = false;
            if (this.prizes[this.resultIndex].type == 3) {
                this.text = '实物奖品会与今日最近一次购买物品一同发出'
            }
            this.$refs.confirm.show()
        },
        exchange() {
            this.request.post(api.lotteryCash, {
                userprize_id: this.userprize_id,
                table_id: this.table_id,
                type: this.prizes[this.resultIndex].type
            }).then((res) => {
                if (res) {
                    this.$toast({
                        message: '兑换成功',
                        duration: 1500
                    })
                } else {
                    this.$toast({
                        message: '兑换失败',
                        duration: 1500
                    })
                }
                this.getTryNum()
            }).catch((err) => {
                console.log(err);
            });
        },
        tolotteryList() {
            this.$router.push('lottery-list')
        },
        share() {
            this.$router.push({
                name: 'lottery-code',
                query: {
                    overdue: this.tableInfo.overdue
                }
            })
        }
    },
    watch: {},
    components: { Turntable, Confirm, Scroll },

};
</script>

<style lang="stylus" scoped>
@import '~assets/main.styl';

* {
    box-sizing: border-box;
    overflow: hidden;
}

.icon-fenx {
    position: absolute;
    top: vw(20);
    right: vw(20);
    width: vw(25);
    height: vw(25);
    fill: grayF;
}

.tofront {
    position: absolute;
    top: vw(25);
    left: vw(20);
    // width: vw(25);
    height: vw(25);
    word-vw(word14, grayF);
}

.Lottery-container {
    position: relative;
    width: vw(375);
    background-image: url(imgBaseUrl + 'lottery-bg.jpg');
    background-size: 100% 100%;

    .turntable-top {
        width: 100%;
        // height: vw(100);
        position: relative;
        top: vw(45);

        img {
            width: vw(214);
            height: vw(88);
            margin: auto;
            position: relative;
            top: 0;
            left: 23%;
        }
    }

    .turntable-wrapper {
        // border: solid 1px blue;
        position: relative;
        width: vw(300);
        height: vw(300);
        margin: auto;
        top: vw(70);

        .turntable-img {
            // border: solid 1px red;
            position: absolute;
            width: vw(300);
            height: vw(300);
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    }

    .desc {
        position: relative;
        width: 100vw;
        // top: vw(315);
        text-align: center;

        p:nth-child(1) {
            word-vw(word14, grayF);
            line-height: vw(25);

            span {
                word-vw(word16, #F9C12E);
            }
        }

        p:nth-child(2) {
            word-vw(word12, grayF);
            line-height: vw(19);
        }
    }

    .turntable-bottom {
        position: relative;
        top: vw(100);
        margin: auto;
        flex-x(center);
        big-hollow();
        height: vw(35);

        svg {
            width: vw(15);
            height: vw(15);
            fill: main-color;
            margin-right: vw(10);
        }
    }

    .list {
        position: absolute;
        bottom: vw(-85);
        left: 50%;
        transform: translate(-50%, -50%);
        width: vw(300);
        height: vw(250);
        margin: auto;

        li {
            height: vw(50);
            background: #F7E0BE;

            span {
                display: inline-block;
                width: vw(100);
                word-vw(word14, #A65719);
                line-height: vw(50);
                text-align: center;
                ellipsis();
            }

            span:nth-child(2) {
                word-vw(word14, #F6817F);
            }
        }

        li:nth-child(odd) {
            background: #FDF9DB;
        }
    }
}

.result {
    position: absolute;
    top: 0;
    width: 100vw;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    overflow-y: hidden;
    color: gray3;

    .close {
        margin-top: middleMargin;
        width: vw(30);
        height: vw(30);
        fill: grayF;
        position: absolute;
        right: 0;
    }

    .title {
        word-vw(word14, gray3);
        line-height: vw(21);
        margin-top: vw(15);
    }

    .confirm-wrapper {
        position: fixed;
        top: 49%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: vw(375);
        height: vw(230);
        background-image: url(imgBaseUrl + 'prize-mask.png');
        background-size: 100% 100%;
        flex-y(center);

        .confirm-content {
            width: 100%;
            // padding: vw(20);
            background-image: url(imgBaseUrl + 'prize-back.png');
            background-size: 100% 100%;
            width: vw(155);
            height: vw(165);

            .content {
                flex-y();

                // padding: vw(10) vw(20);
                img {
                    width: vw(80);
                    height: vw(80);
                }

                .no {
                    width: vw(100);
                    height: vw(100);
                }

                .info-prize {
                    margin-top: vw(10);
                }

                .info-prize-no {
                    margin: vw(5) 0;
                }

                .info-overdue {
                    word-vw(word10, gray9);
                    line-height: vw(14);
                    height: vw(14);
                }
            }
        }
    }

    .operate {
        width: 100%;
        margin: auto;
        display: flex;
        justify-content: center;
        text-align: center;
        font-size: word14;
        position: relative;
        top: 65%;

        // left: 50%;
        .operate-btn {
            flex: 0 0 120px;
            line-height: 25px;
            padding: 5px 0;
            margin: 10px 10px;
            border: 1px solid main-color;
            border-radius: 25px;
            background-color: grayF;
            color: main-color;

            &.left {
                color: grayF;
                background-color: main-color;
            }
        }
    }

    .close-icon {
        position: absolute;
        top: 25%;
        right: 5%;
        width: vw(28);
        height: vw(28);
        overflow: hidden;
        fill: grayF;
    }
}
</style>
